<template>
    <div class="comp-sell-ad-list comp-ad-list">
        <div class="advert-item" v-for="item in sellAdvertList" v-if="isLoading === false && sellAdvertList.length > 0">
            <div class="item-header fn-flex-center advert-item-header">
                <div class="header-asset fn-flex-center">
                    <span class="header-asset-code">賣 {{item.assetcode}} </span>
                    <span class="header-asset-id">|&nbsp;&nbsp;廣告編號：{{item.advertId}}</span>
                </div>
                <span class="header-right"><span class="header-right-edit" @click="editAdvert(item.advertId)">編輯</span> | <span
                        class="header-right-delete" @click="cancelAdvert(item, $event)">刪除</span></span>
            </div>
            <div class="item-detail fn-flex-xcenter">
                <div class="item-detail-col" style="width: 22%;">
                    <span>創建時間</span>
                    <span>{{ $$moment(item.createDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </div>
                <div class="item-detail-col" style="width: 25%;">
                    <span>訂單限額</span>
                    <span>{{ $$filter.floorFix(item.minMoney, 2) }}~{{ $$filter.floorFix(item.maxMoney, 2) }} CNY</span>
                </div>
                <div class="item-detail-col" style="width: 20%;">
                    <span>交易價格</span>
                    <span>{{ item.tradePrice }}</span>
                </div>
                <div class="item-detail-col" style="width: 20%;">
                    <span>託管鎖定</span>
                    <span>{{ item.maxAmount }} {{ item.assetcode }}</span>
                </div>
                <div class="item-detail-col" style="width: 13%;">
                    <span>狀態</span>
                    <span class="col-money"><b class="col-money-unit">{{ item.status }}</b></span>
                </div>
            </div>
        </div>
        <loading v-if="isLoading"></loading>
        <no-data v-if="isLoading === false && sellAdvertList && sellAdvertList.length === 0"></no-data>
        <pager :page-no="pageNo"
               :page-size="pageSize"
               :on-page-change="changePage"
               :page-num="pageNum"></pager>
    </div>
</template>
<script type="text/babel">
    import filter from '../../../../../../grsc-base/util/filter';
    import {PAGE_SIZE_5} from '../../../../../../grsc-base/common/constants';
    import Loading from '../../../../../../grsc-base/component/Loading.vue';
    import NoData from '../../../../../../grsc-base/component/NoData.vue';
    import Pager from '../../../../../../grsc-base/component/Pager.vue';
    import service from '../../service'

    export default {
        components: {
            Loading,
            NoData,
            Pager,
        },
        data() {
            return {
                pageNo: 1,
                pageSize: PAGE_SIZE_5,
                pageNum: 0,
                isLoading: true,

                sellAdvertList: [],
            };
        },
        props: {},
        created() {
            this.fetchAdvertList();
        },
        methods: {
            //獲取廣告列表
            fetchAdvertList(){
                let param = {
                    pageSize: this.pageSize,
                    pageNo: this.pageNo
                };
                service.sellAdvertQuery(param).done(rep => {
                    if (rep.code === window.CODE.SUCCESS) {
                        let listArr = rep.data.list;
                        listArr.forEach((item, index) => {
                            switch (item.status) {
                                case 'SHOW':
                                    item.status = '展示中';
                                    break;
                                case 'PURCHASED':
                                    item.status = '已購買';
                                    break;
                                case 'DELETED':
                                    item.status = '已刪除';
                                    break;
                                default:
                                    break;
                            }
                        });
                        this.sellAdvertList = listArr;
                        this.pageNum = Number(filter.ceilFix(rep.data.total / this.pageSize, 0));
                    } else if (rep.code === window.CODE.NO_PERMISSION.CODE) {
                        window.error('未登錄', () => {
                            window.location.href = './login.html';
                        }, 2000)
                    }else {
                        window.error(rep.msg);
                    }
                }).always(rep => {
                    this.isLoading = false;
                })
            },

            /**
             * 編輯廣告
             * @param advertId
             */
            editAdvert(advertId){
                window.location.href = './c2c.html#/ad/update/sell/' + advertId;
            },

            /**
             * 刪除廣告
             * @param item
             * @param $event
             */
            cancelAdvert(item, $event) {
                let that = this;
                window.confirm({
                    target: $event.target,
                    content: '確認刪除廣告？',
                    confirmBtnText: '刪除',
                    cancelBtnText: '取消',
                }).done(() => {
                    service.sellAdvertDelete({
                        advertId: item.advertId
                    }).done(rep => {
                        if (rep.code === window.CODE.SUCCESS) {
                            this.fetchAdvertList();
                        } else {
                            window.error(rep.msg);
                        }
                    })

                }).fail(() => {

                });
            },

            changePage(currentPage) {
                this.pageNo = currentPage;
                this.fetchAdvertList();
            },
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
</style>